<template>
	<div>
		<!-- 查询面板 -->
		<el-input
			v-model="find.query"
			@keyup.native.enter="onsearch"
			placeholder="请输入查询内容"
		></el-input>
		<!-- 表格 -->
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="index"> </el-table-column>

			<el-table-column prop="order_number" label="订单编号"> </el-table-column>
			<el-table-column prop="order_price" label="订单价格"> </el-table-column>
			<el-table-column label="是否付款">
				<template v-slot="{ row }">
					<el-tag :type="row.pay_status - 0 ? 'success' : 'danger'">
						{{ Boolean(Number(row.pay_status)) ? '已付款' : '未付款' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="is_send" label="是否发布"> </el-table-column>
			<el-table-column label="下单时间">
				<template v-slot="{ row }">
					{{
						new Date(row.create_time * 1000) | fromatDate('yy-MM-dd hh:mm:ss')
					}}
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template>
					<el-button type="primary" @click="openEdit" size="mini">
						修改</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="find.pagenum"
			:page-sizes="[1, 10, 20, 30]"
			:page-size="find.pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
		<!-- 弹窗修改 -->
		<OpenEdit :visible.sync="visible"></OpenEdit>
	</div>
</template>

<script>
import { getOrdersApi } from '@/api/orders'
export default {
	methods: {
		// 打开修改的窗口
		openEdit() {
			this.visible = true
		},
		// 查询
		onsearch() {
			this.getOrders()
		},
		// 选择了指定位置
		handleSizeChange(val) {
			console.log(val)
		},
		// 跳转
		handleCurrentChange(page) {
			this.find.pagenum = page
			this.getOrders()
		},
		// 请求数据
		getOrders() {
			getOrdersApi(this.find).then(({ data }) => {
				// console.log(data.data)
				this.total = data.data.total
				this.tableData = data.data.goods
			})
		},
	},
	data() {
		return {
			visible: false,
			total: 0,
			find: {
				query: '',
				pagenum: 1,
				pagesize: 10,
				user_id: '',
				pay_status: '',
				is_send: '',
				order_fapiao_title: '',
				order_fapiao_company: '',
				order_fapiao_content: '',
				consignee_addr: '',
			},
			tableData: [],
		}
	},
	filters: {
		fromatDate(date, fmt) {
			let ret
			const opt = {
				'y+': date.getFullYear().toString(), // 年
				'M+': (date.getMonth() + 1).toString(), // 月
				'd+': date.getDate().toString(), // 日
				'h+': date.getHours().toString(), // 时
				'm+': date.getMinutes().toString(), // 分
				's+': date.getSeconds().toString(), // 秒
				// 有其他格式化字符需求可以继续添加，必须转化成字符串
			}
			for (let k in opt) {
				ret = new RegExp('(' + k + ')').exec(fmt)
				if (ret) {
					fmt = fmt.replace(
						ret[1],
						ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
					)
				}
			}
			return fmt
		},
	},
	mounted() {
		this.getOrders()
	},
	components: {
		OpenEdit: () => import('./component/OpenEdit.vue'),
	},
}
</script>

<style>
</style>